<template>
  <div>
    <div class="wrapper"><!--充值 -->
      <div class="wrapper">
        <div class="purse">
          <img class="purseImg" src="../../.././assets/static/Consumption/2.png">
        </div>
        <div class="wrapper">
          <div class="RechargeDiv">
            <span class="Recharge">充值</span>
          </div>
          <div class="dateDiv">
            <span class="date1">10月8日 15：11</span>
          </div>
        </div>
      </div>
      <div class="priceDiv">
        <span class="price">+1.000</span>
      </div>
    </div>
    <div class="wrapper"><!--充值 -->
      <div class="wrapper">
        <div class="purse">
          <img class="purseImg" src="../../.././assets/static/Consumption/2.png">
        </div>
        <div class="wrapper">
          <div class="RechargeDiv">
            <span class="Recharge">充值</span>
          </div>
          <div class="dateDiv">
            <span class="date1">10月8日 15：11</span>
          </div>
        </div>
      </div>
      <div class="priceDiv">
        <span class="price">+1.000</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Middle',
  components: {
  },
  data() {
    return {
      artical: [
        {}
      ],
    }
  },
  methods: {},
  mounted() {
  }
}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.purse{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.consumption recordDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchImgDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.expenditureDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.incomeDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.dateDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.RechargeDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.priceDiv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.down{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.consumption record{
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.search{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #67C41D;
}
.expenditure{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #64BE1D;
}
.income{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #64BE1D;
}
.date{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #67C41D;
}
.price{
  font-size: 36px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #63BD1F;
}
.Recharge{
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.date1{
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
/*-------------- img图片 -----------------*/
.searchImg{
  width: 690px;
  height: 80px;
  background: #FFFFFF;
  box-shadow: 0px 7px 23px 1px rgba(180, 180, 180, 0.4);
  border-radius: 16px;
}
.downImg{
  width: 210px;
  height: 58px;
  background: #F5F5F5;
  border-radius: 10px;
}
.purseImg{
  width: 690px;
  height: 136px;
  background: #FFFFFF;
  box-shadow: 0px 7px 23px 1px rgba(180, 180, 180, 0.4);
  border-radius: 16px;
}
</style>
